<template>
  <div class="courseDescriptionTab">
    <van-tabs
      v-model="active"
      color="#00cf8c"
      title-active-color="#00cf8c"
      :swipeable="true"
    >
      <van-tab title="课程描述">
        <div class="firstTab">
          <ul class="outBoxUl">
            <li>
              {{ description.courseTitle }}
            </li>
            <li>
              <van-rate
                v-model="value"
                icon="star"
                void-icon="star"
                disabled-color="#fadb14"
                disabled
                style="vertical-align: middle"
              /><span class="studyNum">
                {{ description.participationsCount }}人学习</span
              >
            </li>
            <li class="CoursePrice">
              <div class="priceBox" v-if="!description.coursePrice == '0'">
                <span class="discountPrice"
                  >&yen;{{ description.coursePrice }}</span
                >
                <span class="coursePrice"
                  >&yen;{{ description.discountPrice }}</span
                >
                <span class="discountDesc">
                  {{ description.discountDesc }}</span
                >
              </div>
              <div class="priceBox" v-else>
                <span class="free">免费</span>
              </div>
            </li>
          </ul>
          <div class="greyLine"></div>
          <div class="introduction" v-html="description.courseDetail"></div>
        </div>
      </van-tab>
      <van-tab title="目录">内容 2</van-tab>
      <van-tab title="评论">内容 3</van-tab>
    </van-tabs>
  </div>
</template>  
    <script>
export default {
  name: "CourseDescriptionTab",
  data() {
    return {
      active: 0,
      value: 5,
    };
  },
  props: {
    description: Object,
  },
  created() {},
};
</script>
<style lang="less" scoped>
.courseDescriptionTab {
  margin-top: 20px;
}
.firstTab {
  background: white;
  min-height: 200px;
}
.outBoxUl {
  padding: 0 10px;
  li {
    padding-top: 10px;
  }
}
.studyNum {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.65);
}
.CoursePrice {
  margin-top: 15px;
  height: 40px;
  border-top: 1px solid #e6e4e4;
  position: relative;
}
.priceBox {
  padding-top: 10px;
  font-size: 14px;
}

.coursePrice {
  color: rgb(255, 79, 35);
  font-size: 14px;
  margin: 0px 10px;
  text-decoration: line-through;
}
.discountDesc {
  position: absolute;
  right: 3%;
  color: #fa8c16;
  background: #fff7e6;
  border-color: #ffd591;
}
.free {
  color: rgba(0, 0, 0, 0.65);
}

.greyLine {
  background: rgb(243, 239, 239);
  height: 10px;
}
.introduction {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.65);
}
</style>
    